const Vue = require('vue')
const fs = require('fs')
const server = require('express')()

let template = require('path').join(__dirname, './index.template.html')

// 在创建 renderer 时提供一个页面模板
const renderer = require('vue-server-renderer').createRenderer({
  template: fs.readFileSync(template, 'utf-8')
})

// 模板还支持简单插值,通过传入一个"渲染上下文对象"，作为 renderToString 函数的第二个参数，来提供插值数据
const context = {
  title: 'vue_ssr_template',
  meta: `
    <meta name="keyword" content="ssr">
    <meta name="description" content="vue ssr 学习">
  `
}

server.get('*', (req, res) => {
  const app = new Vue({
    data: {
      url: req.url
    },
    template: `<div>访问的 URL 是： {{ url }}</div>`
  })

  renderer.renderToString(app, context, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
    }
    // 页面 title 将会是 "Hello"
    // meta 标签也会注入
    console.log(html)
    res.type('.html')
    res.end(html)
  })
})

server.listen(8080)
